@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
// .fl{
//     float: left;
// }
// .fr{
//     float: right;
// }
// .clearfix::after{
//     content: "";
//     clear: both;
// }
body {
  background-color: #161535;
}
.web {
  padding: 300px 0;
  section {
    background-color: #161535;
    .center_box {
      width: 967px;
      margin: 0 auto;
      overflow: hidden;
      .winning_show {
        width: 100%;
        height: 40px;
        margin: 35px 0;
        box-sizing: border-box;
        padding: 10px 0;
        background-color: #201a48;
        overflow: hidden;
        .winning_center {
          width: 300px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          ul {
            transition: all 1s;
            li {
              height: 30px;
              // line-height: 30px;
              color: white;
            }
          }
        }
      }
      .cfx_box {
        display: flex;
        justify-content: space-between;
        .dial {
          width: 657px;
          height: 593px;
          background-color: #201a48;
          display: flex;
          .yuan{
            width: 480px;
            height: 480px;
            border-radius: 50%;
            box-sizing: border-box;
            border: 5px solid #fbb234;
            background: #201a48;
            display: flex;
            margin:  0 auto;
            align-self: center;
            .yuan2{
              width: 450px;
              height: 450px;
              border-radius: 50%;
              align-self: center;
              background-color: #ffd47e;
              margin: 0 auto;
              display: flex;
              position: relative;
              .roundness {
                width: 420px;
                height: 420px;
                border-radius: 50%;
                border: 5px solid #fe8b36;
                background-color: #ffde8d;
                box-shadow: 0px 0px 10px #ff8610;
                margin: 0 auto;
                align-self: center;
                overflow: hidden;
                position: relative; 
                .sector {
                  width: 210px;
                  height: 210px;
                  background-color: #ffe9c2;
                  transform-origin: right bottom;
                  position: absolute;
                  top: 0;
                  left: 0;
                  box-sizing: border-box;
                  border: 1px solid #fed07c;
                  overflow: hidden;
                  .sector_center {
                    width: 120px;
                    height: 100px;
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                    transform: rotate(-50deg) skew(-10deg);
                    p {
                      text-align: center;
                    }
                    .sector_img {
                      width: 75px;
                      height: 80px;
                      margin: 0 auto;
                      overflow: hidden;
                      img {
                        width: 100%;
                      }
                    }
                  }
                }
                .sector_one {
                  transform: rotateZ(30deg) skewY(30deg);
                }
                .sector_two {
                  background-color: #ffd09d;
                  transform: rotateZ(90deg) skewY(30deg);
                }
                .sector_three {
                  transform: rotateZ(150deg) skewY(30deg);
                }
                .sector_four {
                  background-color: #ffd09d;
                  transform: rotateZ(210deg) skewY(30deg);
                }
                .sector_five {
                  transform: rotateZ(270deg) skewY(30deg);
                }
                .sector_six {
                  background-color: #ffd09d;
                  transform: rotateZ(330deg) skewY(30deg);
                }
              
              }
              .jt {
                width: 96px;
                height: 120px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-image: url(../img/jt.png);
                padding-top: 32px;
                box-sizing: border-box;
                margin: 0 auto;
                p {
                  width: 66px;
                  height: 86px;
                  border-radius: 43px;
                  color: #fff6cc;
                  font-size: 28px;
                  margin: 0 auto;
                  text-align: center;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .chance {
          width: 273px;
          height: 593px;
          background-color: #201a48;
          .chance_top {
            width: 164px;
            height: 38px;
            border-radius: 19px;
            background-color: #4e3eb4;
            margin: 25px auto;
            box-sizing: border-box;
            padding: 8px 8px;
            color: white;
            font-size: 16px;
            span {
              color: #fbb234;
            }
          }
          .chance_center {
            span {
              // display: block;
              color: #9785ff;
              margin-left: 50px;
            }
          }
          .chance_bottom {
            ul {
              width: 100%;
              height: 475px;
              padding: 5px 0;
              overflow-y: scroll;
              li {
                width: 230px;
                height: 42px;
                padding: 10px 0;
                border-top: 1px solid #1d1347;
                border-bottom: 1px solid #1d1347;
                margin: 0 auto;
                box-sizing: border-box;
                display: flex;
                justify-content: space-around;
                span {
                  color: white;
                }
              }
             
            }
        
          }
        }
      }
    }
  }
}
